<!--
 *Author：jxx
 *Date：{Date}
 *Contact：283591387@qq.com
 *业务请在@/extension/mes/mes/DeviceClassfiy.jsx或DeviceClassfiy.vue文件编写
 *新版本支持vue或【表.jsx]文件编写业务,文档见:https://doc.volcore.xyz/docs/view-grid、https://doc.volcore.xyz/docs/web
 -->
<template>
    <view-grid ref="grid" :columns="columns" :detail="detail" :details="details" :editFormFields="editFormFields"
        :editFormOptions="editFormOptions" :searchFormFields="searchFormFields" :searchFormOptions="searchFormOptions"
        :table="table" :extend="extend" :onInit="onInit" :onInited="onInited" :searchBefore="searchBefore"
        :searchAfter="searchAfter" :addBefore="addBefore" :addAfter="addAfter" :updateBefore="updateBefore"
        :updateAfter="updateAfter" :rowClick="rowClick" :modelOpenBefore="modelOpenBefore"
        :modelOpenAfter="modelOpenAfter">
        <!-- 自定义组件数据槽扩展，更多数据槽slot见文档 -->
        <template #gridHeader>
        </template>
    </view-grid>
</template>
<script setup lang="jsx">
import extend from "@/extension/mes/mes/DeviceClassfiy.jsx";
import viewOptions from './DeviceClassfiy/options.js'
import { ref, reactive, getCurrentInstance, watch, onMounted } from "vue";
const grid = ref(null);
const { proxy } = getCurrentInstance()
//http请求，proxy.http.post/get
const { table, editFormFields, editFormOptions, searchFormFields, searchFormOptions, columns, detail, details } = reactive(viewOptions())

let gridRef;//对应[表.jsx]文件中this.使用方式一样
//生成对象属性初始化
const onInit = async ($vm) => {
    gridRef = $vm;
    //与jsx中的this.xx使用一样，只需将this.xx改为gridRef.xx
    //更多属性见：https://doc.volcore.xyz/docs/view-grid
}
//生成对象属性初始化后,操作明细表配置用到
const onInited = async () => {
    gridRef.getFormOption('ParentId').changeOnSelect = false
    gridRef.getFormOption('ParentId').multiple = false //true/false
    //隐藏分页信息
    gridRef.paginationHide = true;
    //树形结点的id字段
    gridRef.rowKey = 'DeviceClassfiyId'
    //父级id字段
    gridRef.rowParentField = 'ParentId'
    gridRef.columns.forEach((x) => {
        if (x.field == 'ParentId') {
            x.hidden = true
        }
    })
    const parentOption = proxy.base.getFormOption(editFormOptions, 'ParentId')

    parentOption.required = false
    parentOption.changeOnSelect = true
    parentOption.data = []
    parentOption.orginData = []
}
const searchBefore = async (param) => {
    //界面查询前,可以给param.wheres添加查询参数
    //返回false，则不会执行查询
    return true;
}
let parentCascader
const searchAfter = async (rows, result) => {
    parentCascader = rows.map((x) => {
        return {
            id: x.DeviceClassfiyId,
            key: x.DeviceClassfiyId,
            label: x.Name,
            value: x.DeviceClassfiyId,
            parentId: x.ParentId,
            isEnabled: x.IsEnabled
        }
    })
    return true;
}
const addAfter = (result) => {  //新建保存后result返回的状态及表单对象
    gridRef.initDicKeys(true)
    return true;//返回false不会关闭弹出框
}
const updateBefore = async (formData) => {
    //编辑保存前formData为对象，包括明细表、删除行的Id
    return true;
}
const updateAfter = (result) => {  //新建保存后result返回的状态及表单对象
    gridRef.initDicKeys(true)
    return true;//返回false不会关闭弹出框
}
const rowClick = ({ row, column, event }) => {
    //查询界面点击行事件
    grid.value.clearSelection();
    grid.value.toggleRowSelection(row); //单击行时选中当前行;
}
const modelOpenBefore = async (row) => {//弹出框打开后方法
    return true;//返回false，不会打开弹出框
}
const modelOpenAfter = (row) => {
    //弹出框打开后方法,设置表单默认值,按钮操作等
    let selectRows = gridRef.getTable(true).getSelected();
    if (gridRef.currentAction == 'Add' && selectRows.length > 0) {
        let parentIdGroup = []
        let nodes = proxy.base.getTreeAllParent(selectRows[0].DeviceClassfiyId, parentCascader)
        nodes = nodes.map((m) => {
            return m.id
        })
        gridRef.editFormFields.ParentId = nodes
        gridRef.editFormFields.IsEnabled = 1;
    } 
    else if (gridRef.currentAction == 'Add' || gridRef.currentAction == 'update') 
    {
        gridRef.editFormFields.IsEnabled = 1;
    }
    initParentData()
}
const initParentData = (rows) => {
    let parentCascaderData = []
    let selectRows = gridRef.getTable(true).getSelected();
    if (selectRows != null && gridRef.currentAction == 'update') {
        parentCascader.forEach(item => {
            if (item.isEnabled == 1 && item.id != selectRows[0].DeviceClassfiyId) {
                parentCascaderData.push(item);
            }
        });
    }
    else if (selectRows != null) {
        parentCascader.forEach(item => {
            if (item.isEnabled == 1) {
                parentCascaderData.push(item);
            }
        });
    }

    let data = parentCascaderData
    const option = gridRef.getFormOption('ParentId')
    option.orginData = data
    const treeData = proxy.base.convertTree(
        JSON.parse(JSON.stringify(data)),
        (node, item, isRoot) => {
            console.log(node)
            console.log(item)
            console.log(isRoot)
        }
    )
    option.data = treeData
}
//监听表单输入，做实时计算
//watch(() => editFormFields.字段,(newValue, oldValue) => {	})
//对外暴露数据
defineExpose({})
</script>
